<html>

<head>
    <meta charset="utf-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .green{
            color: green;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
letter-spacing: 0.5em;
        }

    </style>

</head>

<body>
    <div id="app">
        <!-- flag?'active':'' == {'active':flag}  -->
        <!-- red:true  -->
        <h1 :class="{active:true ,green:true,'italic':true}">这是一个很大的H1</h1>

        <h1 :class="classobj">这是一个很大的H1</h1>

        <h1 :style="[h1sobj1,h1sobj2]">这是一个很大的H1 内联样式</h1>
        <!-- v-model:双向数据绑定 只能用在表单元素 -->
        <input type="text" v-model="n1" >
<select v-model="opt">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" v-model="n2" >
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">      
        
        
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2:0,
                result: 0,
                opt: '+',
                flag:true,
                classobj:{active:true ,red:true,'italic':false},
                h1sobj1:{'color':'gray','font-size':'40px'},
                h1sobj2:{'font-style': 'italic'}
            },
            methods: {
                calc() { //计算器算数方法
                    // var _this = this
                     switch (this.opt) {
                        case '+':
                        this.result = parseInt(this.n1) + parseInt(this.n2)
                        console.log('+' + this.result)
                        break;
                        case '-':
                        this.result = parseInt(this.n1) - parseInt(this.n2)
                        break;
                        case '*':
                        this.result = parseInt(this.n1) * parseInt(this.n2)
                        break;
                        case '/':
                        this.result = parseInt(this.n1) / parseInt(this.n2)
                        break;
                      
                    }

                    var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
                    this.result = eval(codeStr); //字符串解析执行
                },
              
                btnHandler() {
                    console.log('这里触发了 btn的点击事件')           
                     }

            },
        })
    </script>
</body>


</html>